<template>
  <el-card class="content">
    <div class="sensorttate">
      <el-table
        :data="tableData"
        style="width: 100%"
        stripe
        size="small"
        height="355"
      >
        <el-table-column label="设备类型" prop="typeName" align="center">
        </el-table-column>
        <el-table-column prop="faultNumber" label="故障统计" align="center">
          <template slot-scope="scope">
            {{ scope.row.faultNumber + "   个设备故障" }}
          </template>
        </el-table-column>
        <el-table-column prop="" label="故障详情" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="
                addDialogVisible = true;
                addUser(scope.row);
              "
              >查看</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="pushStatus" label="推送状态" align="center">
          <template slot-scope="scope">
            <el-button
              type="success"
              size="small"
              v-if="scope.row.pushStatus == 1"
              >已推送</el-button
            >
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="处理状态" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="
                eddDialogVisible = true;
                eddUser(scope.row);
              "
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- <el-row type="flex" justify="end">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.page"
          :page-sizes="[10]"
          :page-size="query.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-row> -->
    </div>
    <div id="senchart" style="width: 100%; height: 400px"></div>
    <el-dialog
      title="查看故障详情"
      :visible.sync="addDialogVisible"
      width="30%"
    >
      <el-table :data="taDate" style="width: 100%" stripe size="small">
        <el-table-column label="故障时间" prop="warnTime" align="center">
        </el-table-column>
        <el-table-column prop="monitorName" label="故障详情" align="center">
          <template slot-scope="scope">
            {{ scope.row.monitorName + "    设备掉线" }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog
      title="查看处理状态"
      :visible.sync="eddDialogVisible"
      width="30%"
    >
      <el-table :data="tate" style="width: 100%" stripe size="small">
        <el-table-column prop="monitorName" label="处理状态" align="center">
          <template slot-scope="scope">
            {{ scope.row.monitorName + "    设备掉线" }}
          </template>
        </el-table-column>
        <el-table-column label="处理状态" prop="dealStatus" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.dealStatus === 0" style="color: red"
              >未处理</span
            >
            <span v-if="scope.row.dealStatus === 1" style="color: #409eff"
              >已处理</span
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </el-card>
</template>

<script>
import { getEquipmentStateStatistics, getFaultDetails } from "../../../api/api";
import echarts from "echarts";
export default {
  name: "SensorStateTotal",
  components: {},
  props: {},
  data() {
    return {
      countList: [],
      xdata: [],
      ydata: [],
      ydatas: [],
      tableData: [],
      taDate: [],
      tate: [],
      total: null,
      query: {
        page: 1,
        pagesize: 10,
      },
      tailingPondId: "",
      addDialogVisible: false,
      eddDialogVisible: false,
    };
  },
  mounted() {
    this.tailingPondId = sessionStorage.getItem("sensorId");
    this.getlist();
  },
  methods: {
    handleSizeChange(val) {
      this.query.pagesize = val;
      this.getlist();
    },
    handleCurrentChange(val) {
      this.query.page = val;
      this.getlist();
    },
    //查询和图表
    async getlist() {
      await getEquipmentStateStatistics({
        tailingPondId: this.tailingPondId,
        pageCount: this.query.page,
        pageSize: this.query.pagesize,
      }).then((res) => {
        if (res.resultCode == "200") {
          this.tableData = res.parameter.dataList;
          for (let i = 0; i < res.parameter.countList.length; i++) {
            this.xdata.push(res.parameter.countList[i].monitorTypeName);
            this.ydata.push(res.parameter.countList[i].goodNumber);
            this.ydatas.push(res.parameter.countList[i].badNumber);
          }
          var myChart = echarts.init(document.getElementById("senchart"));
          // var colors = [];
          const option = {
            color: ["#00ccff", "#ea2424"],
            title: {
              text: "矿山监测设备运行状态综合统计",
            },
            legend: {
              orient: "vertical",
              x: "right", //可设定图例在左、右、居中
              y: "top", //可设定图例在上、下、居中
              padding: [80, 5, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
              data: ["正常", "异常"],
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
              },
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: [
              {
                type: "category",
                data: this.xdata,
                axisTick: {
                  alignWithLabel: true,
                },
              },
            ],
            yAxis: [
              {
                name: "数量",
                type: "value",
              },
            ],
            series: [
              {
                name: "正常",
                type: "bar",
                barWidth: "20%",
                data: this.ydata,
              },
              {
                name: "异常",
                type: "bar",
                barWidth: "20%",
                data: this.ydatas,
              },
            ],
          };
          myChart.setOption(option);
        } else {
          this.tableData = [];
        }
      });
    },
    //查看故障详情
    async addUser(row) {
      await getFaultDetails({
        monitorTypeId: row.monitorTypeId,
        tailingPondId: this.tailingPondId,
      }).then((res) => {
        if (res.resultCode == "200") {
          this.taDate = res.parameter;
        } else {
          this.taDate = [];
        }
      });
    },
    //查看处理
    async eddUser(row) {
      await getFaultDetails({
        monitorTypeId: row.monitorTypeId,
        tailingPondId: this.tailingPondId,
      }).then((res) => {
        if (res.resultCode == "200") {
          this.tate = res.parameter;
        } else {
          this.tate = [];
        }
      });
    },
  },
  computed: {},
  watch: {},
};
</script>

<style scoped>
.content {
  margin-left: 0.08rem;
  height: 87vh;
}
.sensorttate .el-table {
  text-align: center;
  /* margin: 0 20px; */
  padding-left: 0.05rem;
}
.sensorttate .el-table-column {
  padding-left: 0.05rem;
}

.sensorttate .el-pagination {
  float: right;
  margin-top: 0.025rem;
}
/* #senchart {
  margin-top: 50px;
} */
</style>